<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="../static/css/buyCar.css">
    <script src="../static/js/jquery-1.8.0.js"></script>
    <!-- JS代码放在外部文件中 -->
</head>
<body>
<div>
    <!--头部-->
    <div class="top-01">
        <div class="top-02">
            <ul>
                <li><a href="shops.html"><img src="../static/image/Mi01.png" height="82" width="123" alt="Image 1"/></a></li>
                <li><a style="width: 216px; height: 87px; display: inline-block"><img src="../static/image/yuan01.png" height="82" width="82" alt="Image 2"/></a></li>
                <li class="search-container"></li>
                <li><a id="head01" href="zhiId"><img src="../static/image/download.webp" height="32" width="32" alt="Profile"/></a></li>
                <li id="img-01"><a href="#"><img src="../static/image/buyCarBlock.png" alt="Cart"/><span>购物车</span><span1>${shopNumber}</span1></a></li>
            </ul>
        </div>
    </div>

    <!--购物车商品信息-->
    <div class="center">
        <ul>
            <li>商品信息</li><li>单价</li><li>数量</li><li>金额</li><li>操作</li>
        </ul>
    </div>

    <!-- 商品列表 -->
    <div class="shop">
        <c:forEach items="${trolleys}" var="shopInfo">
            <ul>
                <li><input type="checkbox" class="select-item" value="${shopInfo.id}"></li>
                <li class="img01"><img src="image/${shopInfo.img}" height="98" width="98"/></li>
                <li>${shopInfo.trolleyName}</li>
                <li class="price">¥${shopInfo.price}</li>
                <li>
                    <input type="button" name="minus" value="-" >
                    <input type="text" name="amount" value="${shopInfo.number}" readonly>
                    <input type="button" name="plus" value="+">
                </li>
                <li class="total-price" style="color: #ff6d6d">¥${shopInfo.price * shopInfo.number}</li>
                <li><a href='javascript:deleteShopInfo(${shopInfo.id})'><img src="image/laji.png" height="24" width="24"/></a></li>
            </ul>
        </c:forEach>
        <ol>
            <li><input type="checkbox" id="select-all">全选</li>
            <li id="totalPrice">共<span1>0</span1>种商品 合计（不包含运费）：<span>¥0.00</span></li>
            <li><span><a href="javascript:void(0);" id="checkout" class="jieSuan">结 算</a></span></li>
        </ol>
    </div>

    <!-- 订单摘要 -->
    <div id="order-summary">
        <!-- 这里的内容会被 JavaScript 动态添加 -->
    </div>

</div>
<%@include file="foot.jsp"%>
<script src="../static/js/order.js"></script>
<script src="../static/js/buyCar.js"></script>


</body>
</html>
